<template>
  <div>
    <!--      这是一行-->
    <div style="display: flex">
        <div style="width: 100%;">
          <el-card v-show="!isBar1" style="margin: 20px;width: 95%;">
            <el-button size="mini" @click="changeBarOrPie('fxfy')">切换柱状图</el-button>
            <div style="display: flex;justify-content: space-between">
              <div id="pieMain1" style="width: 300px; height: 390px;"></div>
              <div id="pieMain2" style="width: 300px; height: 390px;"></div>
            </div>
          </el-card>
  <!--        柱状图-->
          <el-card v-show="isBar1" style="margin: 20px;width: 95%;">
            <el-button size="mini" @click="changeBarOrPie('fxfy')">切换饼图</el-button>
            <div id="firstMain0" style="width: 100%; height: 390px;"></div>
          </el-card>
        </div>


        <div style="width: 100%;">

          <el-card v-show="!isBar2" style="margin: 20px;width: 95%;">
            <el-button size="mini" @click="changeBarOrPie('fxgz')">切换柱状图</el-button>
            <div style="display: flex;justify-content: space-between">
              <div id="pieMain3" style="width: 300px; height: 390px;"></div>
              <div id="pieMain4" style="width: 300px; height: 390px;"></div>
            </div>
          </el-card>
          <!--        柱状图-->
          <el-card v-show="isBar2" style="margin: 20px;width: 95%;">
            <el-button size="mini" @click="changeBarOrPie('fxgz')">切换饼图</el-button>
            <div id="secondMain0" style="width: 100%; height: 390px;"></div>
          </el-card>
        </div>
      </div>


<!--    这是一行-->
    <div style="display: flex">
      <div style="width: 100%;">
        <el-card v-show="!isBar3" style="margin: 20px;width: 95%;">
          <el-button size="mini" @click="changeBarOrPie('ytfy')">切换柱状图</el-button>
          <div style="display: flex;justify-content: space-between">
            <div id="pieMain5" style="width: 300px; height: 390px;"></div>
            <div id="pieMain6" style="width: 300px; height: 390px;"></div>
          </div>
        </el-card>
        <!--        柱状图-->
        <el-card v-show="isBar3" style="margin: 20px;width: 95%;">
          <el-button size="mini" @click="changeBarOrPie('ytfy')">切换饼图</el-button>
          <div id="firstMain1" style="width: 100%; height: 390px;"></div>
        </el-card>
      </div>
      <div style="width: 100%;">
        <el-card v-show="!isBar4" style="margin: 20px;width: 95%;">
          <el-button size="mini" @click="changeBarOrPie('ytgz')">切换柱状图</el-button>
          <div style="display: flex;justify-content: space-between">
            <div id="pieMain7" style="width: 300px; height: 390px;"></div>
            <div id="pieMain8" style="width: 300px; height: 390px;"></div>
          </div>
        </el-card>
        <!--        柱状图-->
        <el-card v-show="isBar4" style="margin: 20px;width: 95%;">
          <el-button size="mini" @click="changeBarOrPie('ytgz')">切换饼图</el-button>
          <div id="secondMain1" style="width: 100%; height: 390px;"></div>
        </el-card>
      </div>
    </div>

<!--    这是一行-->
    <div style="display: flex">
      <div style="width: 100%;">
        <el-card v-show="!isBar5" style="margin: 20px;width: 95%;">
          <el-button size="mini" @click="changeBarOrPie('pjfy')">切换柱状图</el-button>
          <div style="display: flex;justify-content: space-between">
            <div id="pieMain9" style="width: 300px; height: 390px;"></div>
            <div id="pieMain10" style="width: 300px; height: 390px;"></div>
          </div>
        </el-card>
        <!--        柱状图-->
        <el-card v-show="isBar5" style="margin: 20px;width: 95%;">
          <el-button size="mini" @click="changeBarOrPie('pjfy')">切换饼图</el-button>
          <div id="firstMain2" style="width: 100%; height: 390px;"></div>
        </el-card>
      </div>

      <div style="width: 100%;">
        <el-card v-show="!isBar6" style="margin: 20px;width: 95%;">
          <el-button size="mini" @click="changeBarOrPie('pjgz')">切换柱状图</el-button>
          <div style="display: flex;justify-content: space-between">
            <div id="pieMain11" style="width: 300px; height: 390px;"></div>
            <div id="pieMain12" style="width: 300px; height: 390px;"></div>
          </div>
        </el-card>
        <!--        柱状图-->
        <el-card v-show="isBar6" style="margin: 20px;width: 95%;">
          <el-button size="mini" @click="changeBarOrPie('pjgz')">切换饼图</el-button>
          <div id="secondMain2" style="width: 100%; height: 390px;"></div>
        </el-card>
      </div>
    </div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import { getWarningList } from "@/api/vadmin/budget/approve/approveapi";
import { Decrypt } from "@/utils/AesHmacMD5";

export default {
  name: "indexEcharts",
  data() {
    return {
      queryInfo: {
        wellname: ""//井号
      },

      isBar1: true, //第一个图
      isBar2: true,
      isBar3: true,
      isBar4: true,
      isBar5: true,
      isBar6: true,

      chartsData:[], //存储的数据

      pieTitle: '',
    };
  },
  mounted() {
    // this.drawPieCharts()

    this.getWarningList()
    // this.drawBarLine1();
    // this.drawBarLine2();

  },
  methods: {
    //柱状图和饼状图切换
    changeBarOrPie(val) {
      switch (val) {
        case 'fxfy':
          this.isBar1 = !this.isBar1;
          this.pieTitle = '风险探井'
          let zjData = [
            {value: this.chartsData[0].zjfy, name: '批复费用'},
            {value: this.chartsData[0].zjxj, name: '结算费用'}
          ]
          let syData = [
            {value: this.chartsData[0].syfy, name: '批复费用'},
            {value: this.chartsData[0].syxj, name: '结算费用'}
          ]
          this.drawPieChart(zjData,'pieMain1','钻井费用')
          this.drawPieChart(syData,'pieMain2','试油费用')
          break;
        case 'fxgz':
          this.isBar2 = !this.isBar2;
          this.pieTitle = '风险探井'

          let ksData = [
            {value: this.chartsData[0].zjks, name: '钻井口数'},
            {value: this.chartsData[0].wj, name: '完井口数'},
          ]
          let jcData = [
            {value: this.chartsData[0].zjjc, name: '钻井进尺'},
            {value: this.chartsData[0].wcjc, name: '完成进尺'}
          ]
          this.drawPieChart(ksData,'pieMain3','钻井口数')
          this.drawPieChart(jcData,'pieMain4','进尺完成')
          break;
        case 'ytfy':
          this.isBar3 = !this.isBar3;
          this.pieTitle = '预探井'

          let zjData1 = [
            {value: this.chartsData[1].zjfy, name: '批复费用'},
            {value: this.chartsData[1].zjxj, name: '结算费用'}
          ]
          let syData1 = [
            {value: this.chartsData[1].syfy, name: '批复费用'},
            {value: this.chartsData[1].syxj, name: '结算费用'}
          ]
          this.drawPieChart(zjData1,'pieMain5','钻井费用')
          this.drawPieChart(syData1,'pieMain6','试油费用')
          break;
        case 'ytgz':
          this.isBar4 = !this.isBar4;
          this.pieTitle = '预探井'

          let ksData1 = [
            {value: this.chartsData[1].zjks, name: '钻井口数'},
            {value: this.chartsData[1].wj, name: '完井口数'},
          ]
          let jcData1 = [
            {value: this.chartsData[1].zjjc, name: '钻井进尺'},
            {value: this.chartsData[1].wcjc, name: '完成进尺'}
          ]
          this.drawPieChart(ksData1,'pieMain7','钻井口数')
          this.drawPieChart(jcData1,'pieMain8','进尺完成')
          break;
        case 'pjfy':
          this.isBar5 = !this.isBar5;
          this.pieTitle = '评价井'

          let zjData2 = [
            {value: this.chartsData[2].zjfy, name: '批复费用'},
            {value: this.chartsData[2].zjxj, name: '结算费用'}
          ]
          let syData2 = [
            {value: this.chartsData[2].syfy, name: '批复费用'},
            {value: this.chartsData[2].syxj, name: '结算费用'}
          ]
          this.drawPieChart(zjData2,'pieMain9','钻井费用')
          this.drawPieChart(syData2,'pieMain10','试油费用')
          break;
        case 'pjgz':
          this.isBar6 = !this.isBar6;
          this.pieTitle = '评价井'

          let ksData2 = [
            {value: this.chartsData[2].zjks, name: '钻井口数'},
            {value: this.chartsData[2].wj, name: '完井口数'},
          ]
          let jcData2 = [
            {value: this.chartsData[2].zjjc, name: '钻井进尺'},
            {value: this.chartsData[2].wcjc, name: '完成进尺'}
          ]
          this.drawPieChart(ksData2,'pieMain11','钻井口数')
          this.drawPieChart(jcData2,'pieMain12','进尺完成')
          break;
        default:
          break;
      }
    },


    getWarningList() {
      getWarningList(this.addDateRange(this.queryInfo)).then(res => {
        // console.log(res);
        let resData = JSON.parse(Decrypt(res.data));
        // console.log(resData);
        this.chartsData = resData;

        resData.map((item,index) => {
          this.drawBarLine1(item, 'firstMain'+index);
          this.drawBarLine2(item, 'secondMain'+index);
        })
      });
    },

    drawBarLine1(data, id) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;

      let ratio1 = (data.zjxj / data.zjfy).toFixed(2);
      let ratio2 = (data.syxj / data.syfy).toFixed(2);
      // 动态设置标题
      let titleText = '';
      switch (data.jhlb) {
        case 1:
          titleText = '风险探井';
          break;
        case 2:
          titleText = '预探井';
          break;
        case 3:
          titleText = '评价井';
          break;
        default:
          break;
      }
      // 配置项
      option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "5%",
          top: '20%',
          containLabel: true
        },
        title: {
          text: titleText + "费用预警"
        },
        dataset: {
          dimensions: ["name", "结算费用", "批复费用"],
          source: [
            { name: "钻井", "结算费用": data.zjxj, "批复费用": data.zjfy },
            { name: "试油", "结算费用": data.syxj, "批复费用": data.syfy }
          ]
        },
        xAxis: { type: "category" },
        yAxis: [
          // 第一个 Y 轴 - 完井(口数) 和 钻井口数
          {
            type: "value",
            name: "金额(万元)",
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#5470C6"
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
          },
          // 第二个 Y 轴 - 比率
          {
            type: "value",
            name: "比例",
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#EE6666"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [{
          type: "bar",
          color: "#f80606", // 设置字体颜色
          barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          barWidth: 30,
          label: {
            show: true,
            position: "top", // 在柱子顶部显示
            formatter: function(params) {
              return params.data["结算费用"] + '万元'; // 显示“费用”字段的值
            },
            color: "#f80606" // 设置字体颜色
          },
        }, {
          type: "bar",
          color: "#5470C6", // 设置字体颜色

          barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
          barWidth: 30,
          label: {
            show: true,
            position: "top", // 在柱子顶部显示
            formatter: function(params) {
              return params.data["批复费用"] + '万元'; // 显示“费用”字段的值
            },
            color: "#000" // 设置字体颜色
          }
        },
          // 添加折线系列
          {
            type: "line",
            yAxisIndex: 1, // 使用第二个 Y 轴
            data: [ratio1, ratio2], // 使用计算的比率数据
            label: {
              show: true,
              position: "top",
              formatter: function(params) {
                return params.value; // 显示比率，保留两位小数
              },
              color: "#ff0000" // 设置折线字体颜色
            },
            lineStyle: {
              color: "#ff0000", // 设置折线颜色
              width: 2
            },
            symbol: "circle", // 设置折线的点样式
            symbolSize: 8 // 设置折线点的大小
          },
        ]
      };

      // 使用配置项设置图表
      option && myChart.setOption(option);
    },
    drawBarLine2(data, id) {
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;
      // 动态设置标题
      let titleText = '';
      switch (data.jhlb) {
        case 1:
          titleText = '风险探井';
          break;
        case 2:
          titleText = '预探井';
          break;
        case 3:
          titleText = '评价井';
          break;
        default:
          break;
      }


      // 计算比例
      let ratio1 = (data.wj/data.zjks).toFixed(2);
      let ratio2 = (data.wcjc/data.zjjc).toFixed(2);

      // 配置每个柱状图的样式
      let seriesData = [
        { value: data.wj, label: "钻井完井" }, // 第一项
        { value: data.zjks, label: "钻井口数" }, // 第二项

        { value: data.wcjc, label: "完成进尺" }, // 第三项
        { value: data.zjjc, label: "钻井进尺" } // 第四项
      ];

      // 配置项
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          left: "3%",
          right: "10%",
          bottom: "5%",
          top: '20%',
          containLabel: true
        },
        title: {
          text: titleText + "工作量预警"
        },
        xAxis: [
          {
            type: "category",
            data: ["完成工作量", "计划工作量"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          // 第一个 Y 轴 - 完井(口数) 和 钻井口数
          {
            type: "value",
            name: "完井(口数)",
            position: "left",

            axisLine: {
              show: true,
              lineStyle: {
                color: "#5470C6"
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
            min: 0,
            max: data.zjks + 5
          },
          // 第二个 Y 轴 - 进尺(万米)
          {
            type: "value",
            name: "进尺(万米)",
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#91CC75"
              }
            },
            axisLabel: {
              formatter: "{value}"
            },
            min: 0,
            max: Math.ceil(data.zjjc + 5) //取整

          },
          // 第二个 Y 轴 - 比率
          {
            type: "value",
            name: "比例",
            position: "right",
            offset: 40,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#EE6666"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          // 第一个系列，数据为 '钻井完井' 和 '钻井口数'，并对应左侧 Y 轴
          {
            type: "bar",
            name: "口数",
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            barWidth: 30,
            data: [data.wj, data.zjks], // 这里前两项数据
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = ["#5470C6", "#5470C6"];
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              show: true,  // 显示标签
              position: "top",  // 在柱子上方显示标签
              formatter: function(params) {
                // 使用 custom label
                return seriesData[params.dataIndex].label + ": " + params.value;  // 获取自定义的标签名称
              },
              color: "#000",  // 设置标签颜色
              fontSize: 12  // 设置字体大小
            },
            markLine: ratio1 > 0.75 ? {  // 只有在 ratio1 > 0.75 时才显示 markLine
              lineStyle: {
                type: "dashed",
                color: "red"
              },
              data: [[{ type: "max" }, { type: "min" }]],
              label: {
                show: false // 隐藏标线上的文字
              }
            } : null,  // 如果条件不满足，markLine 不显示
          },
          {
            type: "bar",
            barGap: '0%', // 控制同一组柱子之间的间距 (两个柱子之间的距离)
            barWidth: 30,
            name: "进尺",
            data: [data.wcjc, data.zjjc],
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = ["#91CC75", "#91CC75"];
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              show: true,  // 显示标签
              position: "top",  // 在柱子上方显示标签
              formatter: function(params) {
                // 使用 custom label
                return seriesData[params.dataIndex + 2].label + ": " + params.value;  // 获取自定义的标签名称
              },
              color: "#000",  // 设置标签颜色
              fontSize: 12  // 设置字体大小
            },
            markLine: ratio2 > 0.75 ? {  // 只有在 ratio1 > 0.75 时才显示 markLine
              lineStyle: {
                type: "dashed",
                color: "red"
              },
              data: [[{ type: "max" }, { type: "min" }]],
              label: {
                show: false // 隐藏标线上的文字
              }
            } : null,  // 如果条件不满足，markLine 不显示
          },
          // 添加折线系列
          {
            type: "line",
            yAxisIndex: 2, // 使用第二个 Y 轴
            data: [ratio1, ratio2], // 使用计算的比率数据
            label: {
              show: true,
              position: "top",
              formatter: function(params) {
                // 根据数据值判断
                if (params.dataIndex === 0) {
                  return '探井口数完成比例: ' + params.value; // 第一个值加上“探井口数完成比例”
                } else if (params.dataIndex === 1) {
                  return '进尺完成比例: ' + params.value; // 第二个值加上“进尺完成比例”
                }
                return params.value; // 默认显示比率，保留两位小数
              },
              color: "#EE6666" // 设置折线字体颜色
            },
            lineStyle: {
              color: "#EE6666", // 设置折线颜色
              width: 2
            },
            symbol: "circle", // 设置折线的点样式
            symbolSize: 8, // 设置折线点的大小

          }

        ]
      };

      // 使用配置项设置图表
      option && myChart.setOption(option);
    },


    //绘制饼图
    drawPieChart(data,id,title) {

      let dataLabel = ''
      let dataUnit = ''
      if(title === '进尺完成') {
        dataLabel = '完成进尺占比'
        dataUnit = '万米'
      }
      switch (title) {
        case '钻井费用' :
          dataUnit = '万元'
          dataLabel = '设计预算'
          break
        case '进尺完成' :
          dataUnit = '万米'
          dataLabel = '设计进尺'
          break
        case '试油费用' :
          dataUnit = '万元'
          dataLabel = '设计预算'
          break
        case '钻井口数' :
          dataUnit = '口'
          dataLabel = '设计口数'
          break
      }
      console.log(data,'====>');
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      // 自定义颜色数组
      const colors = [ '#448fde','#c50303',];
      let option;

      option = {
        title: {
          text:this.pieTitle + title,
          subtext: [
            `{b|${dataLabel}}{a|${data[0].value}${dataUnit}},{b|已完成}{a|${data[1].value}${dataUnit}},`,
            `{b|完成占比}{a|${((data[1].value/data[0].value)*100).toFixed(2)}%}`
          ].join('\n'),
          subtextStyle: {
            rich: {
              a: {
                fontSize: 13,
                color: '#ff0000',
                fontWeight: 'bold',
                lineHeight: 30
              },
              b: {
                fontSize: 13,
                color: '#575757',
                fontWeight: 'bold',
                // lineHeight: 30
              },
            }
          }
        },

        tooltip: {
          trigger: 'item',
          // formatter: '{b}: {d}%'  // 鼠标悬停时显示名称和百分比，{b} 是名称，{d} 是百分比
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '90%'  // 将图例向下移动到容器的中间位置
        },
        series: [
          {
            type: 'pie',
            // radius: '50%',
            center: ['50%', '50%'],  // 调整饼图中心的位置
            radius: '40%',
            // data: [
            //   { value: ratio, name: dataLabel },  // 结算费用占批复费用的比例
            //   { value: (100 - ratio).toFixed(2), name: '剩余' },  // 剩余部分
            // ],
            label: {
              show: true,
              formatter: function (params) {
                return `${params.value}${dataUnit}`;  // 显示名称和数值，并加上单位
              },
              margin: 100,  // 标签和饼图之间的间距
              align: 'left',  // 标签左对齐，防止重叠
              verticalAlign: 'middle',  // 垂直居中
              // 如果需要旋转标签，以适应图表，可以加上 rotation 设置
            },
            data: data,
            itemStyle: {
              color: function (params) {
                // 根据不同的索引值给每个数据项分配不同的颜色
                return colors[params.dataIndex % colors.length]; // 如果数据项多于颜色数组，则循环使用颜色
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }

};
</script>

<style scoped>
</style>
